<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float:right"
          type="primary"
          @click="handleSearchList()"
          size="small">
          查询搜索
        </el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch('listQuery')"
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" ref="listQuery" :model="listQuery" size="small" label-width="140px">
          <el-form-item prop="returnSn" label="售后单号：">
            <el-input v-model="listQuery.returnSn" class="input-width" placeholder="售后单号"></el-input>
          </el-form-item>
          <el-form-item prop="orderSn" label="订单编号：">
            <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
          </el-form-item>
           <el-form-item prop="account" label="用户账号：">
            <el-input v-model="listQuery.account" class="input-width" placeholder="用户账号"></el-input>
          </el-form-item>
          <el-form-item  prop="returnStatus" label="订单状态：">
            <el-select v-model="listQuery.returnStatus" placeholder="全部" clearable class="input-width">
              <el-option v-for="item in statusOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="applyTime" label="申请时间：">
            <el-date-picker
              class="input-width"
              v-model="listQuery.applyTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="handleTime" label="处理时间：">
            <el-date-picker
              class="input-width"
              v-model="listQuery.handleTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card style="margin-top: 20px;" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div class="table-container">
      <el-table ref="returnListData"
                :data="returnListData"
                style="width: 100%;"
                border>
        <el-table-column type="index" width="50" align="center"></el-table-column>
        <el-table-column label="售后单号" width="200" align="center">
          <template slot-scope="scope">{{scope.row.returnSn}}</template>
        </el-table-column>
        <el-table-column label="订单编号" width="180" align="center">
          <template slot-scope="scope">{{scope.row.order.orderSn}}</template>
        </el-table-column>
        <el-table-column label="申请时间" width="180" align="center">
          <template slot-scope="scope">{{scope.row.applyTime | formatTime}}</template>
        </el-table-column>
        <el-table-column label="用户账号" align="center" width="180">
          <template slot-scope="scope">{{scope.row.user.account}}</template>
        </el-table-column>
        <el-table-column label="退款金额" width="180" align="center">
          <template slot-scope="scope">￥{{scope.row.returnAmount | number_format}}</template>
        </el-table-column>
        <el-table-column label="申请状态" width="180" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.returnStatus === 0" type="danger">待处理</el-tag>
            <el-tag v-else-if="scope.row.returnStatus === 1" type="warning">已拒绝</el-tag>
            <el-tag v-else-if="scope.row.returnStatus === 2" type="success">已同意</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="处理时间" width="180" align="center">
          <template slot-scope="scope">{{scope.row.handleTime}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
            size="mini"
            @click="handleViewDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import {number_format} from '@/filters/money-filter'

export default {

    data () {
        return {
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            listQuery: {
              'returnSn': '',
              'orderSn': '',
              'returnStatus': '',
              'applyTime': '',
              'handleTime': '',
              'account': '',
            },
            returnListData: [],
            statusOptions: [
              { label: '待处理', value: 0 },
              { label: '已拒绝', value: 1 },
              { label: '已同意', value: 2 },
            ],
        }
    }, 

    created () {
      this.getReturnList()
    },

    filters: {
      formatStatus(value) {
        if (value === 0) {
          return '待处理';
        } else if (value === 1) {
          return '已拒绝';
        } else {
          return '已同意';
        }
      },
    },

    methods: {
      // 获取售后订单列表
      getReturnList () {
      this.listLoading = true
      this.$http({
        url: this.$http.adornUrl('/order/return/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
        })
      }).then(({data}) => {
          if (data && data.code === 0) {
            this.returnListData = data.page.records
            this.totalPage = data.page.total
            console.log(data.records)
          } else {
            this.returnListData = []
            this.totalPage = 0
          }
          this.listLoading = false
        })
      },

      // 搜索售后订单
      handleSearchList() {
        console.log(this.listQuery.returnStatus)
        this.$http({
          url: this.$http.adornUrl('/order/return/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'returnSn': this.listQuery.returnSn,
            'orderSn': this.listQuery.orderSn,
            'returnStatus': this.listQuery.returnStatus,
            'account': this.listQuery.account,
            'applyTime': this.listQuery.applyTime,
            'handleTime': this.listQuery.handleTime
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data.page.records)
            this.returnListData = data.page.records
            this.totalPage = data.page.total
          } else {
            this.returnListData = []
            this.totalPage = 0
          }
        })
      },

      handleViewDetail(row){
        this.$router.push({path:'/returnDetails',query:{returnData:row}})
      },

      // 清空表数据
      handleResetSearch(formName) {
        console.log('****')
        this.$refs[formName].resetFields();
      },

      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getReturnList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getReturnList()
      },
    }

}
</script>

<style>

</style>